<template>
  <div class="app-container">
     区域搜索：  
    <el-select v-model="selectRegion" 
               @click.native.once="findAreaList1(0)"
               @change="findAreaList(selectRegion,2)"
               slot="prepend"
               clearable
               placeholder="请选择区">
      <el-option v-for="(items,index) in regionList " :key="index"
                 :label="items.areaName"
                 :value="items.areaId"></el-option>
    </el-select>     
    <el-select style="margin: 10px"
               v-model="selectStreat"
               @change="findAreaList(selectStreat,3)"
               slot="prepend"
               clearable
               placeholder="请选择街道">
      <el-option v-for="(items,index) in streatList " :key="index"
                 :label="items.areaName"
                 :value="items.areaId"></el-option>
    </el-select>
    <el-select style="margin: 10px"
               v-model="selectCommunity"
               slot="prepend"
               clearable
               placeholder="请选择小区">
      <el-option v-for="(items,index) in communityList " :key="index"
                 :label="items.areaName"
                 :value="items.areaId"></el-option>
    </el-select>

    <el-button type="primary"
               style="margin: 20px"
               @click="selectForm()">搜索</el-button>
    <el-button type="primary"
               style="margin: 20px"
               @click="resetForm()">重置</el-button>
    <el-button type="primary"
               style="margin: 20px"
               @click="dialogFormVisible_add = true">添加</el-button>

    <!-- {{selectRegion}}{{streatList}}{{communityList}}{{selectCommunity}} -->
    <el-table v-loading="listLoading"
              :data="list"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row>
      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column align="center"
                       label="ID"
                       width=auto>
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="区域名称"
                       width=auto>
        <template slot-scope="scope">
          {{ scope.row.areaName }}
        </template>
      </el-table-column>
      <el-table-column label="区域等级"
                       width=auto
                       align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.areaLevel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="区域联系方式"
                       width=auto
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.areaPhone }}
        </template>
      </el-table-column>
      <el-table-column label="区域状态"
                       width=auto
                       align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.areaStatus| statusFilter">{{scope.row.areaStatus | formatStata}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col"
                       label="操作"
                       width=auto
                       align="center">
        <template slot-scope="scope">
          <el-button type="success"
                     plain
                     @click="editor(scope.row)">编辑</el-button>
          <el-button type="danger"
                     plain
                     @click="deleteArea(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加区域"
               :visible.sync="dialogFormVisible_add">
      <el-form :model="area">
        <el-form-item label="区域名称"
                      :label-width="formLabelWidth">
          <el-input v-model="area.areaName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="区域联系方式"
                      :label-width="formLabelWidth">
          <el-input v-model="area.areaPhone"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="区域等级"
                      :label-width="formLabelWidth">
          <el-input v-model="area.areaLevel"
                    @change="getMenu(area.areaLevel,1)"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父区域"
                      :label-width="formLabelWidth">
          <el-select v-model="area.parentId"
                     placeholder="父区域">
            <el-option v-for="(items,index) in parentlist "
                       :key="index"
                       :label="items.areaName"
                       :value="items.areaId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible_add = false">取 消</el-button>
        <el-button type="primary"
                   @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改区域"
               :visible.sync="dialogFormVisible_editor">
      <el-form :model="area2">
        <el-form-item label="区域名称"
                      :label-width="formLabelWidth">
          <el-input v-model="area2.areaName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="区域联系方式"
                      :label-width="formLabelWidth">
          <el-input v-model="area2.areaPhone"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="区域等级"
                      :label-width="formLabelWidth">
          <el-input v-model="area2.areaLevel"
                    @change="getMenu(area2.areaLevel,2)"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父区域"
                      :label-width="formLabelWidth">
          <el-select v-model="area2.parentId"
                     placeholder="父区域">
            <el-option v-for="(items,index) in parentlist2 "
                       :key="index"
                       :label="items.areaName"
                       :value="items.areaId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- {{area}} -->
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible_editor = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitChange()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页插件 -->
    <div class="block"
         style="float:right">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="pageIndex"
                     :page-sizes="pageSizes"
                     :page-size.sync="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="Total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getLevelMenu } from '@/api/regin/area'
import { findAreaList, insertArea, updateArea, deleteMenu } from '@/api/regin/area'

export default {
  inject: ['reload'],
  filters: {
    statusFilter (status) {
      const statusMap = {
        0: "success",
        1: "danger",
      };
      return statusMap[status];
    },
    // 状态显示转换
    formatStata (status) {
      const statusMap = {
        0: '暂未更新',
        1: '防控区',
        2: '管控区',
        3: '封控区'
      };
      return statusMap[status]
    }
  },
  data () {
    return {
      list: null,
      listLoading: true,
      selectRegion: "",
      selectStreat: "",
      selectCommunity: "",
      //分页
      currentPage: 1,
      Total: 0,
      needPage: true,
      pageIndex: 1,
      pageSize: 5,
      pageSizes: [5, 10, 15, 20],
      regionList: [],
      streatList: [],
      parentlist: [],
      parentlist2: [],
      // sonlist:[],
      communityList: [],
      input: "",
      dialogFormVisible_add: false,
      dialogFormVisible_editor: false,
      area: {
        areaId: "",
        areaName: "",
        areaPhone: "",
        areaStatus: 0,
        areaLevel: "",
        parentId: 0,
        parentArea: null,
        child: [],
        patientList: null,
        pasList: null
      },
      area2: {
        areaId: "",
        areaName: "",
        areaPhone: "",
        areaStatus: "",
        areaLevel: "",
        parentId: "",
        parentArea: null,
        child: [],
        patientList: null,
        pasList: null
      },
      formLabelWidth: '120px',
      form1LabelWidth: '120px'
    }
  },
  created () {
    this.fetchData()
    // this.findAreaList()
    // this.getLevelMenu()
  },
  methods: {
    fetchData () {
      this.listLoading = true
      getLevelMenu(1, this.pageIndex, this.pageSize,this.needPage).then(response => {
        this.list = response.obj.list
        localStorage.setItem("list", JSON.stringify(this.list))
        this.Total = response.obj.total
        // console.log(response)
        this.listLoading = false
      })
    },
    getMenu (areaId, status) {
      if (status == 1) {
        if (areaId != "1" && areaId != null) {
          getLevelMenu(areaId - 1,this.pageIndex,this.pageSize,!this.needPage).then(response => {
            this.parentlist = response.obj.list
          })
        } else {
          this.parentlist = []
        }
      } else {
        if (areaId != "1" && areaId != null) {
          getLevelMenu(areaId - 1,this.pageIndex,this.pageSize,!this.needPage).then(response => {
            this.parentlist2 = response.obj.list
          })
        } else {
          this.parentlist = []
        }
      }
      // if (areaId != "3" && areaId != null) {
      //   getLevelMenu(areaId + 1).then(response => {
      //     this.sonlist=response.obj.list
      // })
      // }
    },
    findAreaList (parentId, areaLevel) {
      if (parentId != "") {
        findAreaList(parentId,this.pageIndex,this.pageSize,!this.needPage).then(response => {
        if (parentId == "0") {
          this.regionList = response.obj.list
        } else if (areaLevel == "2") {
          this.streatList = response.obj.list
          this.selectStreat = ""
          this.selectCommunity = ""
        } else if(areaLevel == "3") {
          this.communityList = response.obj.list
          // this.selectStreat = "" 
          this.selectCommunity = ""
        }
      })
      }else{
        if (areaLevel == "2") {
          this.streatList = null
        }else{
          this.communityList = null
        }
      }
    },
    findAreaList1 (parentId) {
        findAreaList(parentId,this.pageIndex,this.pageSize,!this.needPage).then(response => {
          this.regionList = response.obj.list
       })
    },
    submit () {
      this.dialogFormVisible_add = false
      insertArea(this.area).then(response => {
        this.$message(
          {
            message: response.msg,
            type: 'success'
          }
        )
        this.fetchData()
      }
      )
      this.area = {}
    },
    selectForm () {
      this.pageIndex = 1
      this.pageSize = 5
      this.needPage = true
      if (this.selectRegion == "") {
        // this.fetchData()
        this.list = JSON.parse(localStorage.getItem("list"))
      }else if(this.selectStreat == ""){
        findAreaList(this.selectRegion,this.pageIndex,this.pageSize,this.needPage).then(response => {
        this.list = response.obj.list
        this.Total = response.obj.total
      })}else if(this.selectCommunity == ""){
       findAreaList(this.selectStreat,this.pageIndex,this.pageSize,this.needPage).then(response => {
        this.list = response.obj.list
        this.Total = response.obj.total
        // console.log(this.list);
      })}else{
        this.list = []
        // this.list.push()  
        this.list=this.communityList.filter(item => {
          // console.log(item.areaId);
          // console.log(this.selectCommunity);
          return item.areaId == this.selectCommunity
        });
      }
    },
    resetForm () {
      this.selectRegion = ""
      this.selectStreat = ""
      // console.log(this.selectStreat);
      this.selectCommunity = ""
      // this.regionList = []
      this.streatList = []
      this.communityList = []
      // this.fetchData()
      this.list = JSON.parse(localStorage.getItem("list"))
    },
    editor (item) {
      // console.log(item);
      this.area2 = item
      this.dialogFormVisible_editor = true
      this.getMenu(this.area2.areaLevel, 2)
      // console.log(this.parentlist2);
    },
    submitChange () {
      updateArea(this.area2, this.area2.areaId).then(response => {
        this.$message(
          {
            message: response.msg,
            type: 'success'
          }
        )
        this.reload();
      })
      this.dialogFormVisible_editor = false
    },
    deleteArea (item) {
      console.log(item);
      deleteMenu(item.areaId).then(response => {
        this.$message(
          {
            message: response.msg,
            type: 'success'
          }
        )
        this.reload();
      })
    },
    // 分页
    // 每页显示的条数
    handleSizeChange (val) {
      // 改变每页显示的条数 
      this.pageSize = val
      // this.pageSize=val
      // 点击每页显示的条数时，显示第一页
      // this.fetchData.getRegionCheck(1,val,1)
      // 在改变每页显示的条数时，要将页码显示到第一页
      // this.pageIndex=1
      this.fetchData()
    },
    // 显示第几页
    handleCurrentChange (val) {
      // 改变默认的页数
      this.pageIndex = val
      // 切换页码时，要获取每页显示的条数
      // this.pageSize=val
      // this.pageSize = (val)*(this.pageSize)
      this.fetchData()
    }
  }
}
</script>
